<template>
  <div class="chartVue">
    <!--彩种所有导航-->
    <div class="theChartsNav">
      <div class="theChartTop">
        <nav class="navChartsLi">
          <li :class="{selected:navIndex == curNavIndex}" v-for="(navItem,navIndex) in lotteryNav" @click="navTitleEvent(navIndex)">{{navItem}}</li>
        </nav>
        <!--全部彩种 列表-->
        <div class="theChartsNavAll" :class="{open:isUpNav}">
          <ul class="clearFiex">
            <li v-for="router in theRLotteryData" :class="{'on': currentCode == router.code}">
              <router-link :to="{name: 'charts', query: {code: router.code}}">
              <p>{{router.name}}</p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <!---->
      <div class="theChartsToggle relative">
        <div class="theChartsTogMain">
          <ul>
            <li class="title">全部彩种</li>
            <li>
              <p class="broken"><i :class="{'on': selectTrue.broken}" @click="brokenEvent(0)"></i>折线显示</p>
              <p class="broken"><i :class="{'on': selectTrue.vis}" @click="brokenEvent(1)"></i>遗漏显示</p>
            </li>
            <li>
              <p class="issue" v-for="(lss,i) in lssueListData" :class="{'on': i === lssId}" @click="issueEvent(i)">
                {{lss}}</p>
            </li>
          </ul>
        </div>
        <div class="moreLottery" v-if='isShowMoreNav' @click='navUpDown' :class="{up:isUpNav}">︾</div>
      </div>
    </div>
    <lotteryCharts></lotteryCharts>
  </div>
</template>

<script>
  import './charts.scss';
  import lotteryCharts from './lotteryCharts';

  export default {
    data() {
      return {
        /*两级导航*/
        lotteryNav:['彩票游戏'],
        curNavIndex: 0,
        allNavData:{},//所有导航数据
        theRLotteryData: [],//导航显示 数据
        lssueListData: ['最近20期', '最近30期', '最近50期', '最近100期'],
        lssId: 2,
        selectTrue: {
          broken: true,
          vis: false
        },
        lotteryCode: '',
        currentCode: '002',
        isUpNav: false,//是否收起导航
        isShowMoreNav: false,//是否显示更多导航图标
      }
    },
    activated() {
      this.init();
    },
    methods: {
      status() {
        this.selectTrue.broken = true;
        this.selectTrue.vis = false;
        this.lssId = 2;
      },
      init() {
        let that = this;
        that.currentCode = that.$route.query.code;
        $(window).resize(() => {
          that.checkNavSpill();
        });
        that.status();
        that.initData();
      },
      initData() {
        let that = this;
        that.isUpNav = false;
        that.theRLotteryData = [];
        that._Util.post(that, that._Api.POST_LOTTERY_ALL_Kind_DATA, {}, (data) => {
          that.allNavData = data||{};
          that.getCurNavIndex();
          that.navData(data,that.curNavIndex);
          setTimeout(() => {
            that.checkNavSpill();
          }, 500);
        });
      },
      //获取当前导航选中状态
      getCurNavIndex() {
        let that = this;
        that.allNavData.tradition.forEach((dat, i) => {
          dat.subKindList.forEach((v, y) => {
            let lotCode = v.isDefault === 1 ? v.officialCode : v.creditCode;
            if (lotCode == that.$route.query.code) {
              that.curNavIndex = 0;
            }
          })
        });
        that.allNavData.entertain.forEach((dat, i) => {
          dat.subKindList.forEach((v, y) => {
            let code = v.isDefault === 1 ? v.officialCode : v.creditCode;
            if (code == that.$route.query.code) {
              that.curNavIndex = 1;
            }
          })
        });
      },
      //导航数据处理
      navData(data,index){
        let that = this;
        that.theRLotteryData = [];
        if(index=='0'){
          data.tradition.forEach((dat, i) => {
            dat.subKindList.forEach((v, y) => {
              let dataOne = {};
              dataOne.code = v.isDefault == '2' ? v.creditCode : v.officialCode;
              if(dataOne.code == that.$route.query.code || dataOne.code == that._Util.checkLotteryCode(that.$route.query.code)){
                that.currentCode = dataOne.code;
              }
              dataOne.name = v.name;
              that.theRLotteryData.push(dataOne);
            })
          });
        }else{
          data.entertain.forEach((dat, i) => {
            dat.subKindList.forEach((v, y) => {
              let dataOne = {};
              dataOne.code = v.isDefault == '2' ? v.creditCode : v.officialCode;
              if(dataOne.code == that.$route.query.code || dataOne.code == that._Util.checkLotteryCode(that.$route.query.code)){
                that.currentCode = dataOne.code;
              }
              dataOne.name = v.name;
              that.theRLotteryData.push(dataOne);
            })
          });
        }
        
      },
      //计算导航是否溢出
      checkNavSpill() {
        let fatherHeight = $(".theChartsNavAll").innerHeight();
        let sonHeight = $(".theChartsNavAll ul").height();
        if (fatherHeight < sonHeight) {
          this.isShowMoreNav = true;
        } else {
          this.isShowMoreNav = false;
        }
      },
      //导航标题点击事件
      navTitleEvent(index){
        this.curNavIndex = index;
      },
      //导航收叠
      navUpDown() {
        this.isUpNav = !this.isUpNav;
      },
      issueEvent(index) {
        this.lssId = index;
        $('.lotGD11').scrollTop(0);
      },
      brokenEvent(index) {
        let that = this;
        if (index === 0) {
          that.selectTrue.broken = that.selectTrue.broken ? false : true;
        }
        if (index === 1) {
          that.selectTrue.vis = that.selectTrue.vis ? false : true;
        }
      },
    },
    components: {
      lotteryCharts
    },
    watch: {
      '$route.query.code'() {
        this.init();
      },
      'isShowMoreNav'(val) {
        if (!val) {
          this.isUpNav = false;
        }
      },
      'curNavIndex'(val){
        let that = this;
        this.navData(this.allNavData,val);
        setTimeout(() => {
          that.checkNavSpill();
        }, 500);
      }
    }
  }
</script>
